<template>
  <div class="generatePPT" v-loading = "loading" :element-loading-text="loadingContent" element-loading-background="rgba(0, 0, 0, 0.8)" element-loading-spinner="el-icon-loading">
    <header class="header">
      <span @click="emit('back')">返回</span>
      <span>编辑PPT</span>
      <el-button style="margin-left: auto;" type="primary" @click = "downloadPPT">下载</el-button>
    </header>
    <el-card>
      <div class="content">
        <div class="h1">PPT标题： {{ list.topic }}</div>
        <div class="page" v-for="item, index in list.pages">
          <div class="h2" v-if="activeInput !== index + ''" @click="pageClick(index)">页面 {{ index + 1 }} ：{{
              item.title }}</div>
          <div class="h2-input" v-else>
            <el-input @blur="activeInput = ''" v-model="item.title" @keyup.enter="activeInput = ''">
              <template #label>
                <el-popover :offset="[70, 18]" :show-arrow="false" v-model:show="alert">
                  <div class="popover-item" v-for="ele in actions1" @click="onSelect(ele.text, index, -1)">
                    <SvgIcon :name="ele.icon" :style="(ele.icon === '删除' ? 'color: red;' : '') + 'margin-right:10px;'"
                             :size="16" /><span>{{
                      ele.text
                    }}</span>
                  </div>
                  <template #reference>
                    <SvgIcon name="更多" @click="alert = true" :size="20" />
                  </template>
                </el-popover>

              </template>
            </el-input>
          </div>
          <ul class="row">
            <li v-for="ite, ind in item.paragraphs">
              <div v-if="activeInput !== index + '-' + ind" @click="rowClick(index, ind)">
                {{ ite.title }}：{{ ite.content }}
              </div>
              <div class="h2-input" v-else>
                <van-field v-model="ite.title" @keyup.enter="activeInput = ''">
                  <template #label>
                    <van-popover :offset="[70, 18]" :show-arrow="false" v-model:show="alert">
                      <div class="popover-item" v-for="ele in actions2" @click="onSelect(ele.text, index, ind)">
                        <SvgIcon :name="ele.icon"
                                 :style="(ele.icon === '删除' ? 'color: red;' : '') + 'margin-right:10px;'" :size="16" /><span>{{
                          ele.text
                        }}</span>
                      </div>
                      <template #reference>
                        <SvgIcon name="更多" @click="alert = true" :size="20" />
                      </template>
                    </van-popover>

                  </template>
                </van-field>
                <van-field @blur="activeInput = ''" style="padding-left: 5px;margin-top: 5px;" v-model="ite.content"
                           @keyup.enter="activeInput = ''">
                </van-field>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { onMounted,ref } from 'vue'
import {createPPT, GeneratePPT} from '@/api/index'
const loading = ref(false)
const downPPtLoading = ref(false)
const list = ref({})
const activeInput = ref('')
const emit = defineEmits(['back'])
const loadingContent = ref("")
const prop = defineProps({
  search: {
    type: String,
  },
  filePaths: {
    type: String,
  }
})
const downloadPPT = async () => {
  loadingContent.value = '下载中...'
  loading.value = true
  const data = await GeneratePPT({
    ppt: JSON.stringify(list.value),
    // ppt: JSON.stringify({ "topic": "手机介绍", "pages": [{ "title": "手机定义与分类", "paragraphs": [{ "title": "手机的定义", "content": "便携式电子设备，集通信、娱乐、信息处理于一体" }, { "title": "手机的分类", "content": "根据操作系统分为iOS、Android、Windows Phone等" }, { "title": "手机的特性", "content": "现代手机具备高清触摸屏、高速处理器等先进功能" }] }, { "title": "通信功能演示", "paragraphs": [{ "title": "手机的通话功能", "content": "通过电话线或无线网络进行语音通话" }, { "title": "短信和视频通话", "content": "发送和接收文字、图片和视频信息" }, { "title": "网络连接", "content": "支持4G/5G网络，实现高速数据传输" }] }, { "title": "高清触摸屏展示", "paragraphs": [{ "title": "屏幕材质与分辨率", "content": "采用高清液晶屏，分辨率高达XXdpi" }, { "title": "触控操作体验", "content": "操作流畅，响应迅速，支持多点触控" }, { "title": "显示效果与色彩管理", "content": "色彩鲜艳，支持护眼模式" }] }, { "title": "高速处理器详解", "paragraphs": [{ "title": "处理器类型与品牌", "content": "采用高性能处理器，如Snapdragon或Kirin系列" }, { "title": "处理能力与速度", "content": "多核CPU，运行速度快，处理能力强" }, { "title": "能耗与散热技术", "content": "优化能耗，采用先进的散热技术" }] }, { "title": "大容量存储器展示", "paragraphs": [{ "title": "存储类型与容量", "content": "内置存储和扩展存储两种方式，容量从128GB到TB不等" }, { "title": "读写速度与稳定性", "content": "支持高速读写，保证数据稳定性" }, { "title": "存储卡扩展性", "content": "支持MicroSD卡扩展，满足不同需求" }] }, { "title": "高速网络连接（4G/5G）", "paragraphs": [{ "title": "网络类型与速度", "content": "支持4G/5G网络，下载速度高达几十Mbps" }, { "title": "网络切换与稳定性", "content": "快速切换网络，保证数据传输的稳定性" }, { "title": "物联网与智能家居", "content": "支持物联网设备，实现智能家居控制" }] }, { "title": "摄像头系统详解", "paragraphs": [{ "title": "摄像头数量与类型", "content": "通常配备多个摄像头，包括前置和后置摄像头" }, { "title": "像素与分辨率", "content": "像素高达几百万，支持高清视频录制" }, { "title": "光学防抖与夜景模式", "content": "支持光学防抖，夜景模式提升低光环境拍摄质量" }] }, { "title": "操作系统介绍（iOS/Android）", "paragraphs": [{ "title": "iOS系统特点", "content": "由Apple公司开发，界面简洁，安全性高" }, { "title": "Android系统特点", "content": "开源系统，灵活性强，支持个性化定制" }, { "title": "系统更新与兼容性", "content": "定期更新，不同设备兼容性良好" }] }, { "title": "科技发展与便携性", "paragraphs": [{ "title": "科技的进步", "content": "手机处理器性能提升，运行速度飞快" }, { "title": "尺寸与重量的优化", "content": "轻薄设计，单手操作更加便捷" }, { "title": "无线充电与无线连接", "content": "无线充电技术普及，5G网络实现高速连接" }] }, { "title": "智能化程度提升", "paragraphs": [{ "title": "人工智能助手", "content": "Siri/小爱同学等智能助手，提升交互体验" }, { "title": "面部识别与指纹解锁", "content": "生物识别技术，增强安全性" }, { "title": "智能家居控制", "content": "手机成为家庭控制中心，实现远程控制" }] }, { "title": "生活与工作影响", "paragraphs": [{ "title": "移动办公", "content": "手机成为移动办公平台，随时随地处理工作" }, { "title": "在线学习与娱乐", "content": "在线课程、视频、游戏，丰富学习和娱乐方式" }, { "title": "社交网络的延伸", "content": "社交媒体应用，保持与朋友的联系，扩大社交范围" }] }, { "title": "未来趋势探讨", "paragraphs": [{ "title": "5G网络的普及", "content": "5G网络将手机连接速度提升到前所未有的水平" }, { "title": "折叠屏手机的出现", "content": "折叠屏手机将手机形态进一步扩展，提供更多可能性" }, { "title": "虚拟现实与增强现实的应用", "content": "手机将与VR/AR技术结合，提供沉浸式体验" }] }] }),
    pageSize: 8,
    max_para_words: 30,
    filePaths: prop.filePaths == "" || prop.filePaths == null ? []:prop.filePaths.split(","),
  })
  console.log('data', data)

  // 创建 Blob 对象
  const blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.presentationml.presentation' });
  // 创建指向该 Blob 的 URL
  const url = window.URL.createObjectURL(blob);
  // 创建 a 元素用于下载
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', 'topic.pptx'); // 设置下载文件名
  document.body.appendChild(link);
  link.click(); // 模拟点击以触发下载
  document.body.removeChild(link); // 下载后移除元素
  window.URL.revokeObjectURL(url); // 释放 URL 对象
  loading.value = false
}

const rowClick = (index, ind) => {
  activeInput.value = index + '-' + ind
  alert = false

}
const pageClick = (index) => {
  activeInput.value = index + ''
  alert = false
}

const onSelect = (data, index, ind) => {
  const row = {
    title: '项',
    content: ind + 2
  }
  const page = {
    title: '',
    paragraphs: [
      {
        title: '项',
        content: 1
      },
      {
        title: '项',
        content: 2
      },
      {
        title: '项',
        content: 3
      },
    ]
  }
  const dataobj = {
    "在上方添加一页": () => {
      list.value.pages.splice(index, 0, page)
    },
    "在下方添加一页": () => {
      list.value.pages.splice(index + 1, 0, page)

    },
    "在上方添加一项": () => {
      list.value.pages[index].paragraphs.splice(ind, 0, row)

    },
    "在下方添加一项": () => {
      list.value.pages[index].paragraphs.splice(ind + 1, 0, row)

    },
    "删除此页": () => {
      list.value.pages.splice(index, 1)

    },
    "删除此项": () => {
      list.value.pages[index].paragraphs.splice(ind, 1)

    },
  }
  dataobj[data]()
  alert = false

}
onMounted(() => {
  initPPT()
})
let alert = ref('')
const actions1 = ref([
  { text: '在上方添加一页', icon: '上方添加一页' },
  { text: '在下方添加一页', icon: '下方添加一页' },
  { text: '删除此页', icon: '删除' },
]);
const actions2 = ref([
  { text: '在上方添加一项', icon: '上方添加一页' },
  { text: '在下方添加一项', icon: '下方添加一页' },
  { text: '删除此项', icon: '删除' },
]);

const initPPT = async () => {
  loadingContent.value = "生成中..."
  loading.value = true;
  const { data, code } = await createPPT({
    topic: prop.search,
    report : prop.filePaths == "" || prop.filePaths == null ? []:prop.filePaths.split(","),
  });

  if (code === 200 && data) {
    list.value = JSON.parse(data);
    downPPtLoading.value = true
    console.log(list.value);
  } else {
    // 处理非200响应的情况
    console.error('Failed to get PPT:', code);
  }
  loading.value = false
}
</script>

<style lang="scss" scoped>
.generatePPT {
  width: 100%;
  height: 100%;
  padding: 30px 66px;

  .header {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;

    span {
      font-weight: 600;
      margin-right: 8px;

      &:nth-child(1) {
        text-align: end;
        width: 58px;
        height: 20px;
        cursor: pointer;
        background: url('@/assets/image/左箭头.svg') no-repeat left;
      }
    }

    .el-button {
      width: 80px;
      height: 32px;
      border-radius: 6px;
    }
  }


  .el-card {
    height: 90%;
    margin-top: 30px;
    .content {
      width: 100%;
      border-radius: 6px;
      background: #F6F6F6;
      padding-top: 8px;
      padding-bottom: 8px;
      margin-top: 8px;

      .h1 {
        color: #191919;
        font-size: 14px;
        font-weight: 600;
        width: 100%;
        padding: 0 8px 0 28px;
      }

      .page {
        color: #191919;
        font-family: "Microsoft YaHei";
        font-size: 14px;
        font-weight: 600;
        margin: 16px 0;

        .h2 {
          padding: 0 8px 0 28px;
        }

        .h2-input {
          display: flex;
          align-items: center;
          flex-wrap: wrap;

          :deep(.van-field) {
            align-items: center;
            padding: 0;
            background-color: transparent;
            border-radius: 4px;
            border: 1px solid var(--van-primary-color);
            background: #E0E9FF;
            height: 40px;

            .van-field__label {
              width: 20px;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }


        }

        ul {
          list-style: disc;
          padding-left: 45px;
          color: #191919;
          font-size: 14px;
          font-weight: 400;
          margin-top: 8px;
          width: 100%;

          li {
            width: 100%;
            margin: 16px 0;
            padding-right: 10px;
          }
        }
      }
    }
  }
}
</style>
